<template>
  <div class="edit">
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
      <FormItem label="品牌" prop="vendorName">
        <Select clearable style="width:430px" v-model="formValidate.vendorName">
          <Option v-for="item in nameList" :value="item.vendorName" :key="item.id">{{ item.vendorName }}</Option>
        </Select>
      </FormItem>
      <FormItem label="AP型号" prop="model">
        <Input v-model="formValidate.model" />
      </FormItem>
      <FormItem label="最大接入终端个数" prop="maxTerminalNum">
        <Input v-model="formValidate.maxTerminalNum" style="width: 300px;">
        <Button slot="prepend" @click="prepend(formValidate.maxTerminalNum,'maxTerminalNum')">
          <Icon type="ios-remove" size="20"></Icon>
        </Button>
        <Button slot="append" @click="append(formValidate.maxTerminalNum,'maxTerminalNum')">
          <Icon type="ios-add" size="20"></Icon>
        </Button>
        </Input>
      </FormItem>
      <FormItem label="最高速率（Mbps）" prop="maxSpeed">
        <Input v-model="formValidate.maxSpeed" style="width: 300px;">
        <Button slot="prepend" @click="prepend(formValidate.maxSpeed,'maxSpeed')">
          <Icon type="ios-remove" size="20"></Icon>
        </Button>
        <Button slot="append" @click="append(formValidate.maxSpeed,'maxSpeed')">
          <Icon type="ios-add" size="20"></Icon>
        </Button>
        </Input>
      </FormItem>

      <FormItem label="支持网络协议" prop="supportProtocolss">
        <CheckboxGroup v-model="formValidate.supportProtocolss?formValidate.supportProtocolss.split(','):formValidate.supportProtocolss" >
          <Checkbox label="ac"></Checkbox>
          <Checkbox label="b"></Checkbox>
          <Checkbox label="g"></Checkbox>
          <Checkbox label="n"></Checkbox>
        </CheckboxGroup>
      </FormItem>
     <FormItem label="支持频率（GHz）" prop="supportFrequency">
        <Select clearable style="width:430px" v-model="formValidate.supportFrequency">
          <Option v-for="item in frequency" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="功率（w）" prop="power">
        <Input v-model="formValidate.power" style="width: 300px;">
        <Button slot="prepend" @click="prepend(formValidate.power,'power')">
          <Icon type="ios-remove" size="20"></Icon>
        </Button>
        <Button slot="append" @click="append(formValidate.power,'power')">
          <Icon type="ios-add" size="20"></Icon>
        </Button>
        </Input>
      </FormItem>
       <FormItem label="长度（cm）" prop="length">
         <Input v-model="formValidate.length" style="width: 300px;">
         <Button slot="prepend" @click="prepend(formValidate.length,'length')">
           <Icon type="ios-remove" size="20"></Icon>
         </Button>
         <Button slot="append" @click="append(formValidate.length,'length')">
           <Icon type="ios-add" size="20"></Icon>
         </Button>
         </Input>
      </FormItem>
       <FormItem label="宽度（cm）" prop="width">
         <Input v-model="formValidate.width" style="width: 300px;">
         <Button slot="prepend" @click="prepend(formValidate.width,'width')">
           <Icon type="ios-remove" size="20"></Icon>
         </Button>
         <Button slot="append" @click="append(formValidate.width,'width')">
           <Icon type="ios-add" size="20"></Icon>
         </Button>
         </Input>
      </FormItem>
       <FormItem label="高度（U）" prop="height">
         <Input v-model="formValidate.height" style="width: 300px;">
         <Button slot="prepend" @click="prepend(formValidate.height,'height')">
           <Icon type="ios-remove" size="20"></Icon>
         </Button>
         <Button slot="append" @click="append(formValidate.height,'height')">
           <Icon type="ios-add" size="20"></Icon>
         </Button>
         </Input>
      </FormItem>
      <FormItem label="上市日期" prop="releaseDate">
        <Row>
          <Col span="12">
          <DatePicker type="month" placeholder="上市日期" style="width: 200px" v-model="formValidate.releaseDate"></DatePicker>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="备注" prop="comment">
        <Input v-model="formValidate.comment" type="textarea" :autosize="{minRows: 3,maxRows: 5}" />
      </FormItem>
      <FormItem>
        <Button type="warning" @click="handleContinue('formValidate','/aptype/add')" v-if="type==='add'">提交并继续添加</Button>
        <Button type="primary" @click="handleSubmit('formValidate','/aptype/add','添加成功！','/work/apList')" style="margin-left: 8px" v-if="type==='add'">提交</Button>
        <Button type="primary" @click="handleSubmit('formValidate','/aptype/edit','修改成功！','/work/apList')" style="margin-left: 8px" v-if="type==='edit'">修改</Button>
        <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  import editMixin from '../../../mixin/edit'
  import listMixin from '../../../mixin/list'
  export default {
    mixins:[editMixin],
    data () {
      return {
        nameList:[],
        nameListUrl: '/aptype/list',
        tag: {
          'title': 'AP',
          'path': '/work/apList'
        },
        type: '',
        frequency:[
          {id:0, name:'2.4GHz'},
          {id:1, name:'5GHz'},
          {id:2, name:'2.4/5GHz'},
        ],
        ruleValidate: {
          vendorName: [
            { required: true, message: '请选择品牌', trigger: 'blur' }
          ],
          model: [
            { required: true, message: '此项必填', trigger: 'blur' }
          ]
        }
      }
    },
    mounted (){
      console.log(this.nameList)
      var _this = this;
      this.type = this.$route.query.type;
      var data=['supportFrequency','power','length','width','height','maxTerminalNum','maxSpeed'];
      for(var i=0;i<data.length;i++){
        if(_this.type === 'add'){
          _this.$set(_this.formValidate,data[i],0);
        }
      }
    },
  }
</script>

<style scoped>
  .edit{
    width: 50%;
  }
  .ivu-input-group .ivu-input{
    text-align: center;
  }
   .ivu-input-group-prepend, .ivu-input-group-append{
    width:36px !important;
  }
</style>
